<template>
    <div>
        <ul>
            <li :style="{opacity}" v-cloak>欢迎学习Vue</li>
            <li>news001 <input type="text"></li>
            <li>news002 <input type="text"></li>
            <li>news003 <input type="text"></li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'News',
    data() {
        return {
            opacity: 1,
            flag: true,
        }
    },
    /* beforeDestroy() {
        console.log('News组件即将被销毁');
        // 清空定时器
        clearInterval(this.interval);
    },
    //Vue完成模板解析，并把初始的真实DOM元素放入页面后就调用mounted钩子函数
    mounted() {
        this.interval = setInterval(() => {
            
            if(this.flag) {
                this.opacity -= 0.01;
            }
            if(!this.flag) {
                this.opacity += 0.01;
            }
            if (this.opacity <= 0 || this.opacity >= 1) {
                this.flag= !this.flag;
            }
        }, 20);
        
    }, */
    activated() {
        console.log('News组件被激活');
         this.interval = setInterval(() => {
            
            if(this.flag) {
                this.opacity -= 0.01;
            }
            if(!this.flag) {
                this.opacity += 0.01;
            }
            if (this.opacity <= 0 || this.opacity >= 1) {
                this.flag= !this.flag;
            }
        }, 20);
    },
    deactivated() {
        console.log('News组件被失活');
        clearInterval(this.interval);
    },
}
</script>
